<template>
    <div class="app-container">
        <div class="main-box">
            <div class="main-table">
                <div class="marginB">
                    <el-input v-model="searchText" placeholder="请输入要查询的关键字" size="small" style="width: 200px">
                    </el-input>
                    <el-button style="marginLeft: 10px" type="primary" size="small" @click="searchChange">搜索</el-button>
                    <el-button style="marginLeft: 10px" size="small" @click="reset">重置</el-button>
                    <div style="float: right">
                        <el-button type="primary" icon="el-icon-plus" size="small" @click="operate({},'新增')">新增</el-button>
                        <el-tooltip class="item" effect="dark" content="显隐" placement="top">
                            <el-button icon="el-icon-s-operation" circle @click="drawer = true" ></el-button>
                        </el-tooltip>
                    </div>
                </div>
            </div>
             <el-table
                :data="tableData"
                stripe
                style="width: 100%; marginBottom: 20px"
                size="small"
                v-loading="tableLoading"
                class="tableInfo"
                row-key="id"
            >
                <el-table-column
                label="序号"
                width="80"
                v-if="!showHideData[0].hide"
                show-overflow-tooltip
                >
                <template slot-scope="scope">
                    <span>{{scope.$index + (page.pageNo - 1) * page.pageSize + 1}}</span>
                </template>
                </el-table-column>
                <el-table-column
                prop="columnName"
                label="名称"
                sortable
                v-if="!showHideData[1].hide"
                show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                prop="columnComment"
                label="描述"
                sortable
                v-if="!showHideData[2].hide"
                show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                prop="columnType"
                label="数据类型"
                sortable
                v-if="!showHideData[3].hide"
                show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                prop="columnLength"
                label="字段长度"
                sortable
                v-if="!showHideData[4].hide"
                show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                prop="creator"
                label="创建人"
                sortable
                v-if="!showHideData[5].hide"
                show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                prop="createTime"
                label="创建时间"
                sortable
                v-if="!showHideData[6].hide"
                show-overflow-tooltip
                >
                 <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="checkView(scope.row)">查看</el-button>
                    <el-button size="small" type="text" @click="operate(scope.row,'编辑')">编辑</el-button>
                    <el-button size="small" type="text" style="color: red" @click="delFields(scope.row)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
             <el-pagination
                background
                :layout="layout"
                :total="pageTotal"
                :page-size="page.pageSize"
                :page-sizes="pageSizes"
                :current-page="page.pageNo"
                style="float: right"
                @size-change="sizeChange"
                @current-change="currentChange"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="status === 'add' ? '添加常用字段' : '修改常用字段'"
            :visible.sync="showDialog"
            @close='cancelFields'
        >
            <el-form :model="form" ref="form" label-width="120px">
                <el-row :gutter="24">
                  <el-col :span="24">
                        <el-form-item
                            label="列名"
                            prop="columnName"
                            :rules="[
                            {
                                required: true,
                                message: '请填写列名',
                                trigger: 'blur',
                            },
                            ]"
                        >
                            <el-input v-model="form.columnName" placeholder="请填写列名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="24">
                        <el-form-item
                            label="描述"
                            prop="columnComment"
                            :rules="[
                            {
                                required: true,
                                message: '请填写描述',
                                trigger: 'blur',
                            },
                            ]"
                        >
                            <el-input v-model="form.columnComment" placeholder="请填写描述"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="24">
                        <el-form-item
                            label="数据类型"
                            prop="columnType"
                            :rules="[
                            {
                                required: true,
                                message: '请选择数据类型',
                                trigger: 'blur',
                            },
                            ]"
                        >   
                            <el-select v-model="form.columnType" placeholder="请选择数据类型">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="24">
                        <el-form-item
                            label="字段长度"
                            prop="columnLength"
                            :rules="[
                            {
                                required: true,
                                message: '请填写字段长度',
                                trigger: 'blur',
                            },
                            ]"
                        >
                            <el-input v-model="form.columnLength" placeholder="请填写字段长度"  type="number" min=0></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button @click="cancelFields">取 消</el-button>
            <el-button type="primary" @click="submit" :disabled="updateFlag">确 定</el-button >
            </div>
        </el-dialog>
        <el-dialog
            title="查看"
            :visible.sync="viewDialog"
        >
            <el-form ref="form" :model="viewData" label-width="100px" size="mini">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="名称：" label-width="120px">{{ viewData.columnName }}</el-form-item>
                        <el-form-item label="描述："  label-width="120px">{{ viewData.columnComment }}</el-form-item>
                        <el-form-item label="数据类型："  label-width="120px">{{ viewData.columnType }}</el-form-item>
                        <el-form-item label="字段长度："  label-width="120px">{{ viewData.columnLength }}</el-form-item>
                        <el-form-item label="创建人："  label-width="120px">{{ viewData.creator}}</el-form-item>
                        <el-form-item label="创建时间："  label-width="120px">{{ parseTime(viewData.createTime) }}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!-- 列显隐 -->
        <el-drawer :visible.sync="drawer" direction="rtl">
            <span slot="title" style="fontSize:18px;font-weight:500;color: #262626;">列显隐</span>
            <el-table
            :data="showHideData"
            size="small"
            border
            style="width: 80%; marginLeft: 10%"
            >
            <el-table-column prop="columnName" label="列名" align="center">
            </el-table-column>
            <el-table-column prop="hide" label="隐藏" align="center">
                <template slot-scope="scope">
                <el-checkbox v-model="scope.row.hide"></el-checkbox>
                </template>
            </el-table-column>
            </el-table>
        </el-drawer>
        
    </div>
</template>

<script>
import { createFields, getFieldsList, updateFields, deleteFields} from '@/api/dataManagement/dataFields'
export default{
    data () {
        return {
            updateFlag: false,
            tableLoading: false, //表格加载
            drawer: false, //列显隐抽屉
            searchText: '',
            status: "add", //判断是新增还是编辑
            showDialog: false, //显示新增/编辑界面
            form: {
                columnName: "",
                columnComment:'',
                columnType: '',
                columnLength: '',
            },
             options: [
                {id: 1, label: 'varchar',value: 'varchar'},
                {id: 2, label: 'int',value: 'int'},
                {id: 3, label: 'double',value: 'double'},
                {id: 4, label: 'text',value: 'text'},
                {id: 5, label: 'datetime',value: 'datetime'},
                {id: 6, label: 'float',value: 'float'},
            ], //数据类型选项
             //列显隐
            showHideData: [
                {
                    columnName: "序号",
                    hide: false,
                },
                {
                    columnName: "名称",
                    hide: false,
                },
                {
                    columnName: "描述",
                    hide: false,
                },
                {
                    columnName: "数据类型",
                    hide: false,
                },
                {
                    columnName: "字段长度",
                    hide: false,
                },
                {
                    columnName: "创建人",
                    hide: false,
                },
                {
                    columnName: "创建时间",
                    hide: false,
                },
            ],
            layout: "prev, pager, next,sizes,jumper", //分页显示布局
            pageSizes: [10, 20, 30, 50], //分页显示每页条数选择
            pageTotal: 1, //数据总条数
            page: {
                pageNo: 1, // 当前页数
                pageSize: 10, // 每页显示多少条
            },
            tableData: [],
            viewDialog:false,//显示查看界面
            viewData: {},
            editId: ''
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        getList() {
            this.tableLoading = true
            let data = {
                ...this.page,
               keyword: this.searchText
            }
            getFieldsList(data).then((res) => {
                if (res.code === 0) {
                    this.tableData = res.data.list
                    this.pageTotal = res.data.total
                    this.tableLoading = false
                }else{
                    this.tableLoading = false
                }
            })
        },
         //搜索
        searchChange() {
            this.page.pageNo = 1;
            this.tableLoading = true;
            this.getList();
        },
        reset() {
            this.searchText = ''
            this.page.pageNo = 1;
            this.getList();
        },
        newFields() {
            this.showDialog = true
        },
        cancelFields () {
            this.showDialog = false
            this.$refs["form"].clearValidate()
        },
        submit() {
            this.updateFlag = true
            this.$refs["form"].validate(valid => {
                if (!valid) {
                    this.updateFlag = false
                    return;
                }
                if(this.status == 'add'){ //新增
                    createFields(this.form).then((res) => {
                        if(res.code == 0) {
                            this.$message.success("新增成功");
                            this.showDialog = false
                            this.$refs["form"].clearValidate()
                            this.getList()
                        }
                    })
                     .finally(() => {
                        setTimeout(() => {
                            this.updateFlag = false;
                        }, 2000)
                    });
                }else{
                    this.form.id = this.editId
                    updateFields(this.form).then((res) => {
                        if(res.code == 0) {
                            this.$message.success("编辑成功");
                            this.showDialog = false
                            this.$refs["form"].clearValidate()
                            this.getList()
                        }
                    })
                    .finally(() => {
                        setTimeout(() => {
                            this.updateFlag = false;
                        }, 2000)
                    });
                }
               
            })
        },
        checkView(row){
            this.viewDialog = true
            this.viewData = row
        },
        operate(row,status) {
            this.showDialog = true
            if(status==='新增'){
                this.status = 'add'
                Object.keys(this.form).forEach(key =>{this.form[key] = ''})
            }else if(status === '编辑'){
                this.status = 'edit'
                this.form.columnName = row.columnName
                this.form.columnComment = row.columnComment
                this.form.columnType = row.columnType
                this.form.columnLength = row.columnLength
                this.editId = row.id
            }
        },
        //每页条数更改
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.page.pageNo = 1;
            this.tableLoading = true;
            this.getList();
        },
          //页码更改
        currentChange(current) {
            this.page.pageNo = current;
            this.tableLoading = true;
            this.getList();
        },
        delFields(row) {
            this.$confirm("是否确认删除", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                return deleteFields({
                    id: row.id,
                });
                })
                .then((res) => {
                if (res.code === 0) {
                        this.$message.success("删除成功");
                        this.getList();
                    }
                })
            .catch((e) => console.log("删除信息:", e));
        }
    }
}
</script>

<style scoped lang="scss">
    .marginB{
        margin-bottom: 20px;
    }
</style>
